import React from 'react';
import { NavLink, useNavigate } from 'react-router-dom';
import './index.less';
import hutao from '../../assets/imgs/hutao.png';
import { HomeOutlined, SettingOutlined, LoginOutlined } from '@ant-design/icons';
import { useAppSelector } from '../../redux/hook';

export default function Avatar(props: Record<string, unknown>) {
    const navigate = useNavigate();
    // 从redux中获取token
    const token = useAppSelector((state) => state.login.token);

    /**
     * 跳转到个人中心我的评教页面
     */
    function toMyinfo() {
        navigate('/personalCenter/myEvaluate');
    }

    /**
     * 退出登录
     */
    function quit() {
        // 清空本地token
        localStorage.removeItem('token');
        // 跳转到主页
        window.location.href = '/';
    }

    return (
        <>
            <div className="avatar">
                <img src={hutao} alt="" onClick={toMyinfo} {...props} />
                {token ? (
                    <ul>
                        <li>
                            <NavLink to="/personalCenter">
                                <HomeOutlined style={{ color: 'white' }} />
                                <span>个人主页</span>
                            </NavLink>
                        </li>
                        <li>
                            <NavLink to="/setting">
                                <SettingOutlined style={{ color: 'white' }} />
                                <span>设置</span>
                            </NavLink>
                        </li>
                        <li>
                            <a onClick={quit}>
                                <LoginOutlined style={{ color: 'white' }} />
                                <span>退出</span>
                            </a>
                        </li>
                    </ul>
                ) : (
                    <ul>
                        <li>
                            <NavLink to="/login">
                                <LoginOutlined style={{ color: 'white' }} />
                                <span>登录/注册</span>
                            </NavLink>
                        </li>
                    </ul>
                )}
            </div>
        </>
    );
}
